    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>数据库管理系统</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            }

            body {
                background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
                color: #333;
                line-height: 1.6;
                min-height: 100vh;
                padding: 20px;
            }

            .container {
                max-width: 1200px;
                margin: 0 auto;
            }

            /* 登录保护界面 */
            #auth-protection {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.8);
                backdrop-filter: blur(10px);
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 9999;
            }

            .auth-container {
                background: white;
                padding: 40px;
                border-radius: 15px;
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
                width: 100%;
                max-width: 450px;
                text-align: center;
            }

            .auth-container h2 {
                margin-bottom: 20px;
                color: #2c3e50;
                font-size: 24px;
            }

            .auth-container p {
                margin-bottom: 25px;
                color: #7f8c8d;
            }

            .auth-form {
                display: flex;
                flex-direction: column;
                gap: 20px;
            }

            .form-group {
                text-align: left;
            }

            .form-group label {
                display: block;
                margin-bottom: 8px;
                font-weight: 600;
                color: #2c3e50;
            }

            .form-group input {
                width: 100%;
                padding: 12px 15px;
                border: 1px solid #ddd;
                border-radius: 8px;
                font-size: 16px;
                transition: border-color 0.3s;
            }

            .form-group input:focus {
                outline: none;
                border-color: #4a6cf7;
                box-shadow: 0 0 8px rgba(74, 108, 247, 0.3);
            }

            .auth-btn {
                padding: 12px 25px;
                background: linear-gradient(to right, #4a6cf7, #6a11cb);
                color: white;
                border: none;
                border-radius: 50px;
                cursor: pointer;
                font-size: 16px;
                font-weight: 600;
                transition: all 0.3s;
                box-shadow: 0 4px 10px rgba(74, 108, 247, 0.3);
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
            }

            .auth-btn:hover {
                transform: translateY(-2px);
                box-shadow: 0 6px 15px rgba(74, 108, 247, 0.4);
            }

            .auth-error {
                color: #e74c3c;
                margin-top: 10px;
                font-size: 14px;
                display: none;
            }

            /* 主内容区域 - 默认隐藏 */
            #main-content {
                display: none;
            }

            header {
                background: linear-gradient(to right, #4a6cf7, #6a11cb);
                color: white;
                padding: 25px 0;
                text-align: center;
                margin-bottom: 30px;
                border-radius: 10px;
                box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            }

            h1 {
                font-size: 2.5rem;
                margin-bottom: 10px;
                font-weight: 700;
            }

            .tabs {
                display: flex;
                margin-bottom: 20px;
                background: white;
                border-radius: 10px;
                overflow: hidden;
                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            }

            .tab {
                padding: 18px 25px;
                flex: 1;
                text-align: center;
                cursor: pointer;
                transition: all 0.3s ease;
                font-weight: 600;
                color: #7f8c8d;
                border-bottom: 3px solid transparent;
            }

            .tab.active {
                color: #4a6cf7;
                border-bottom: 3px solid #4a6cf7;
                background: #f8f9fa;
            }

            .tab:hover:not(.active) {
                background: #f1f2f6;
                color: 4a6cf7;
            }

            .tab-content {
                display: none;
                background-color: white;
                border-radius: 10px;
                box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
                overflow: hidden;
                margin-bottom: 30px;
            }

            .tab-content.active {
                display: block;
            }

            .search-bar {
                padding: 20px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                background: #f8f9fa;
                border-bottom: 1px solid #eee;
            }

            .search-input {
                padding: 12px 20px;
                width: 70%;
                border: 1px solid #ddd;
                border-radius: 50px;
                font-size: 16px;
                box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
                transition: all 0.3s;
            }

            .search-input:focus {
                outline: none;
                border-color: #4a6cf7;
            
                box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 8px rgba(74, 108, 247, 0.3);
            }

            .btn {
                padding: 12px 25px;
                background: linear-gradient(to right, #4a6cf7, #6a11cb);
                color: white;
                border: none;
                border-radius: 50px;
                cursor: pointer;
            
                font-size: 16px;
                font-weight: 600;
                transition: all 0.3s;
                box-shadow: 0 4px 10px rgba(74, 108, 247, 0.3);
                display: flex;
                align-items: center;
                gap: 8px;
            }

            .btn:hover {
                transform: translateY(-2px);
                box-shadow: 0 6px 15px rgba(74, 108, 247, 0.4);
            }

            .btn:active {
                transform: translateY(0);
            }

            .btn-danger {
                background: linear-gradient(to right, #e74c3c, #c0392b);
                box-shadow: 0 4px 10px rgba(231, 76, 60, 0.3);
            }

            .btn-danger:hover {
                box-shadow: 0 6px 15px rgba(231, 76, 60, 0.4);
            }

            .btn-warning {
                background: linear-gradient(to right, #f39c12, #e67e22);
                box-shadow: 0 4px 10px rgba(243, 156, 18, 0.3);
            }

            .btn-warning:hover {
            
                box-shadow: 0 6px 15px rgba(243, 156, 18, 0.4);
            }

            #games-table {
                width: 100%;
                border-collapse: collapse;
                table-layout: fixed;
            }

            #games-table thead {
                background: linear-gradient(to right, #4a6cf7, #6a11cb);
                color: white;
            }

            #games-table th {
                padding: 18px 15px;
                text-align: center;
                font-weight: 600;
                text-transform: uppercase;
                font-size: 14px;
                vertical-align: middle;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            #games-table th:nth-child(1) { width: 80px; }
            #games-table th:nth-child(2) { width: 150px; }
            #games-table th:nth-child(3) { width: 200px; }
            #games-table th:nth-child(4) { width: 200px; }
            #games-table th:nth-child(5) { width: 200px; }
            #games-table th:nth-child(6) { width: 200px; }
            #games-table th:nth-child(7) { width: 170px; }

            #games-table tbody { display: block; }

            #games-table tr {
                display: grid;
                grid-template-columns: 80px 150px 200px 200px 200px 200px 170px;
                align-items: start;
                min-height: 100px;
                border-bottom: 1px solid #eaeaea;
            }

            #games-table td {
                padding: 15px;
                display: flex;
                align-items: center;
                min-height: 100px;
                overflow: hidden;
                text-align: left;
            }

            #firsttime-table {
                width: 100%;
                border-collapse: collapse;
                table-layout: fixed;
            }

            #firsttime-table thead {
                background: linear-gradient(to right, #4a6cf7, #6a11cb);
            
                color: white;
            }

            #firsttime-table th {
                padding: 18px 15px;
                text-align: center;
                font-weight: 600;
                text-transform: uppercase;
                font-size: 14px;
                vertical-align: middle;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            #firsttime-table th:nth-child(1) { width: 200px; }
            #firsttime-table th:nth-child(2) { width: 150px; }
            #firsttime-table th:nth-child(3) { width: 300px; }
            #firsttime-table th:nth-child(4) { width: 350px; }
            #firsttime-table th:nth-child(5) { width: 170px; }

            #firsttime-table tbody { display: block; }
            #firsttime-table tr {
                display: grid;
                grid-template-columns: 200px 150px 300px 350px 170px;
                align-items: start;
                min-height: 100px;
                border-bottom: 1px solid #eaeaea;
            }

            #firsttime-table td {
                padding: 15px;
                display: flex;
                align-items: center;
                min-height: 100px;
                overflow: hidden;
                text-align: left;
            }

            .content-container {
                max-height: 70px;
                overflow-y: auto;
                width: 100%;
                padding-right: 5px;
            }

            .content-container::-webkit-scrollbar {
                width: 5px;
            }

            .content-container::-webkit-scrollbar-track {
            
                background: #f1f1f1;
                border-radius: 10px;
            }

            .content-container::-webkit-scrollbar-thumb {
                background: #b8b8b8;
                border-radius: 10px;
            }

            .content-container::-webkit-scrollbar-thumb:hover {
                background: #888;
            }

            .actions {
                display: flex;
                gap: 10px;
                justify-content: center;
            }

            .action-btn {
                padding: 8px 12px;
                border: none;
                border-radius: 6px;
                cursor: pointer;
                font-size: 14px;
                transition: all 0.2s;
                display: flex;
                align-items: center;
                gap: 5px;
            }

            .edit-btn {
                background-color: #ffc107;
                color: #212529;
                box-shadow: 0 2px 5px rgba(255, 193, 7, 0.3);
            }

            .edit-btn:hover {
                background-color: #e0a800;
                transform: translateY(-1px);
                box-shadow: 0 4px 8px rgba(255, 193, 7, 0.4);
            }

            .delete-btn {
                background-color: #dc3545;
                color: white;
                box-shadow: 0 2px 5px rgba(220, 53, 69, 0.3);
            }

            .delete-btn:hover {
                background-color: #c82333;
                transform: translateY(-1px);
                box-shadow: 0 4px 8px rgba(220, 53, 69, 0.4);
            }

            .modal {
                display: none;
                position: fixed;
                z-index: 1000;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                overflow: auto;
                background-color: rgba(0, 0, 0, 0.5);
                backdrop-filter: blur(5px);
            }

            .modal-content {
                background-color: #fefefe;
                margin: 5% auto;
                padding: 30px;
                border-radius: 15px;
                box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
                width: 60%;
                max-width: 700px;
                position: relative;
                animation: modalFadeIn 0.3s;
            }

            @keyframes modalFadeIn {
                from { opacity: 0; transform: translateY(-50px); }
                to { opacity: 1; transform: translateY(0); }
            }

            .close {
                color: #aaa;
                position: absolute;
                top: 15px;
                right: 25px;
                font-size: 28px;
                font-weight: bold;
                cursor: pointer;
                transition: color 0.3s;
            }

            .close:hover {
                color: #333;
            }

            .form-group {
                margin-bottom: 20px;
            }

            .form-group label {
                display: block;
                margin-bottom: 8px;
                font-weight: 600;
                color: #2c3e50;
            }

            .form-group input, .form-group textarea {
                width: 100%;
                padding: 12px 15px;
                border: 1px solid #ddd;
                border-radius: 8px;
                font-size: 16px;
                transition: border-color 0.3s;
            }

            .form-group input:focus, .form-group textarea:focus {
                outline: none;
                border-color: #4a6cf7;
                box-shadow: 0 0 8px rgba(74, 108, 247, 0.3);
            }

            .form-group textarea {
                height: 120px;
                resize: vertical;
            }

            .notification {
                position: fixed;
                top: 20px;
                right: 20px;
                padding: 15px 25px;
                border-radius: 8px;
                color: white;
                font-weight: 500;
                z-index: 1001;
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
                display: flex;
                align-items: center;
                
                gap: 10px;
                transform: translateX(100%);
                transition: transform 0.3s ease;
            }

            .notification.show {
                transform: translateX(0);
            }

            .notification.success {
                background: linear-gradient(to right, #28a745, #20c997);
            }

            .notification.error {
                background: linear-gradient(to right, #dc3545, #fd7e14);
            }

            .notification.warning {
            
                background: linear-gradient(to right, #ffc107, #fd7e14);
            }

            .confirm-dialog {
                background-color: #fefefe;
                margin: 15% auto;
                padding: 30px;
                border-radius: 15px;
                text-align: center;
                box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
                max-width: 500px;
            }

            .confirm-dialog h3 {
                margin-bottom: 15px;
                color: #2c3e50;
            }

            .confirm-dialog p {
                margin-bottom: 25px;
                color: #7f8c8d;
            }

            .confirm-dialog .actions {
                justify-content: center;
            }

            .no-data {
                grid-column: 1 / -1;
                text-align: center;
                padding: 40px;
            
                color: #7f8c8d;
                font-style: italic;
            }

            /* 响应式设计 */
            @media (max-width: 992px) {
                #games-table, #games-table thead, #games-table tbody, #games-table th, #games-table td, #games-table tr,
                #firsttime-table, #firsttime-table thead, #firsttime-table tbody, #firsttime-table th, #firsttime-table td, #firsttime-table tr {
                    display: block;
                }

                #games-table thead tr, #firsttime-table thead tr {
                    position: absolute;
                    top: -9999px;
                    left: -9999px;
                }

            
                #games-table tr, #firsttime-table tr {
                    border: 1px solid #eaeaea;
                    margin-bottom: 15px;
                    border-radius: 8px;
                    padding: 15px;
                    display: block;
                    grid-template-columns: none;
                }

                #games-table td, #firsttime-table td {
                    border: none;
                    position: relative;
                    padding-left: 50%;
                    min-height: auto;
                    padding: 10px;
                    border-bottom: 1px solid #eee;
                    display: block;
                    text-align: left;
                }

                #games-table td:before, #firsttime-table td:before {
                    content: attr(data-label);
                    font-weight: 600;
                    width: 45%;
                    display: inline-block;
                    color: #7f8c8d;
                }

                #games-table .actions, #firsttime-table .actions {
                    justify-content: flex-start;
                    margin-top: 15px;
                    padding-left: 50%;
                }

                .modal-content {
                    width: 90%;
                    padding: 20px;
                }

                .search-bar {
                    flex-direction: column;
                    gap: 15px;
                }

                .search-input {
                    width: 100%;
                }

                .auth-container {
                    width: 90%;
                    padding: 20px;
                }
            }
        </style>
    </head>
    <body>
        <!-- 认证保护层 -->
        <div id="auth-protection">
            <div class="auth-container">
                <h2><i class="fas fa-lock"></i> 访问受限</h2>
                <p>请输入管理员密码以访问数据库管理系统</p>
                <div class="auth-form">
                    <div class="form-group">
                        <label for="admin-password">管理员密码</label>
                        <input type="password" id="admin-password" placeholder="请输入访问密码">
                    </div>
                    <button class="auth-btn" onclick="checkPassword()">
                        <i class="fas fa-unlock"></i> 解锁访问
                    </button>
                    <div class="auth-error" id="auth-error">
                        <i class="fas fa-exclamation-circle"></i> 密码错误，请重试
                    </div>
                </div>
            </div>
        </div>

        <!-- 主内容区域 -->
        <div id="main-content" class="container">
            <header>
                <h1>数据库管理系统</h1>
                <p>管理游戏库和导师库数据</p>
                <div style="display: flex; justify-content: center; gap: 15px; margin-top: 15px;">
                    <button class="btn" onclick="logout()">
                        <i class="fas fa-sign-out-alt"></i> 退出登录
                    </button>
                    <button class="btn" onclick="openChangePasswordModal()">
                        <i class="fas fa-key"></i> 修改密码
                    </button>
                </div>
            </header>

            <div class="tabs">
                <div class="tab active" onclick="openTab(event, 'games-tab')">
                    <i class="fas fa-gamepad"></i> 游戏库
                </div>
                <div class="tab" onclick="openTab(event, 'firsttime-tab')">
                    <i class="fas fa-chalkboard-teacher"></i> 导师库
                </div>
            </div>

            <!-- 游戏库标签页 -->
            <div id="games-tab" class="tab-content active">
                <div class="search-bar">
                    <input type="text" class="search-input" placeholder="搜索游戏..." id="game-search">
                    <button class="btn" onclick="openGameModal()">
                        <i class="fas fa-plus"></i> 添加新游戏
                    </button>
                </div>

                <table id="games-table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>名称</th>
                            <th>简述</th>
                            <th>针对问题</th>
                            <th>玩法介绍</th>
                            <th>心理学解释</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td colspan="7" class="no-data">请输入密码后加载数据...</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- 导师库标签页 -->
            <div id="firsttime-tab" class="tab-content">
                <div class="search-bar">
                    <input type="text" class="search-input" placeholder="搜索导师..." id="firsttime-search">
                    <button class="btn" onclick="openFirstTimeModal()">
                        <i class="fas fa-plus"></i> 添加新导师
                    </button>
                </div>

                <table id="firsttime-table">
                    <thead>
                        <tr>
                            <th>导师ID</th>
                            <th>名称</th>
                            <th>描述</th>
                            <th>海报url</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td colspan="5" class="no-data">请输入密码后加载数据...</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 游戏模态框 -->
        <div id="game-modal" class="modal">
            <div class="modal-content">
                <span class="close" onclick="closeModal('game-modal')">&times;</span>
                <h2 id="game-modal-title">添加新游戏</h2>
                <form id="game-form">
                    <input type="hidden" id="game-id">
                    <div class="form-group">
                        <label for="game-name">名称</label>
                        <input type="text" id="game-name" required>
                    </div>
                    <div class="form-group">  
                        <label for="game-desc">描述</label>
                        <input type="text" id="game-desc">
                    </div>
                    <div class="form-group">
                        <label for="game-problemtosolve">针对问题</label>
                        <input type="text" id="game-problemtosolve">
                    </div>
                    <div class="form-group">
                        <label for="game-introduction">介绍</label>
                        <textarea id="game-introduction"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="game-theoryexplanation">理论解释</label>
                    
                        <textarea id="game-theoryexplanation"></textarea>
                    </div>
                    <button type="submit" class="btn">
                        <i class="fas fa-save"></i> 保存
                    </button>
                </form>
            </div>
        </div>

        <!-- 导师模态框 -->
        <div id="firsttime-modal" class="modal">
            <div class="modal-content">
                <span class="close" onclick="closeModal('firsttime-modal')">&times;</span>
                <h2 id="firsttime-modal-title">添加新导师</h2>
                <form id="firsttime-form">
                    <input type="hidden" id="firsttime-id">
                    <div class="form-group">
                        <label for="firsttime-name">名称</label>
                        <input type="text" id="firsttime-name" required>
                    </div>
                    <div class="form-group">
                        <label for="firsttime-desc">描述</label>
                        <input type="text" id="firsttime-desc">
                    </div>
                    <div class="form-group">
                        <label for="firsttime-postporturl">海报url</label>
                        <input type="text" id="firsttime-postporturl">
                    </div>
                    <button type="submit" class="btn">
                        
                        <i class="fas fa-save"></i> 保存
                    </button>
                </form>
            </div>
        </div>

        <!-- 修改密码模态框 -->
        <div id="change-password-modal" class="modal">
            <div class="modal-content">
                <span class="close" onclick="closeModal('change-password-modal')">&times;</span>
                <h2>修改管理员密码</h2>
                <form id="change-password-form">
                    <div class="form-group">
                        <label for="current-password">当前密码</label>
                        <input type="password" id="current-password" required>
                    </div>
                    <div class="form-group">
                        <label for="new-password">新密码</label>
                        <input type="password" id="new-password" required>
                    </div>
                    <div class="form-group">
                        <label for="confirm-password">确认新密码</label>
                        <input type="password" id="confirm-password" required>
                    </div>
                    <button type="submit" class="btn">
                        <i class="fas fa-key"></i> 修改密码
                    </button>
                </form>
            </div>
        </div>

        <!-- 确认删除对话框 -->
        <div id="confirm-dialog" class="modal">
            <div class="confirm-dialog">
                <h3>确认删除</h3>
                
                <p>您确定要删除这条记录吗？此操作无法撤销。</p>
                <div class="actions">
                    <button class="btn btn-danger" id="confirm-delete-btn">
                        <i class="fas fa-trash"></i> 确认删除
                    </button>
                    <button class="btn" onclick="closeModal('confirm-dialog')">
                        <i class="fas fa-times"></i> 取消
                    </button>
                </div>
            </div>
        </div>

        <!-- 通知 -->
        <div id="notification" class="notification"></div>

        <script>
            // 设置密码（在实际应用中，密码应该通过后端验证，这里仅为前端演示）
            let ADMIN_PASSWORD = localStorage.getItem('adminPassword') || "admin123"; // 默认密码，可以修改
            
            // API基础URL
            const baseUrl = 'http://112.124.28.46:8080';
            
            // 当前选中的标签页
            let currentTab = 'games-tab';
            
            // 当前要删除的记录类型和ID
            let deleteType = '';
            let deleteId = '';
            
            // 检查密码
            function checkPassword() {
                const passwordInput = document.getElementById('admin-password');
                const errorElement = document.getElementById('auth-error');
                
                if (passwordInput.value === ADMIN_PASSWORD) {
                    // 密码正确，显示主内容
                    document.getElementById('auth-protection').style.display = 'none';
                    document.getElementById('main-content').style.display = 'block';
                    
                    // 加载数据
                    loadGames();
                    loadTeachers();
                    
                    // 存储认证状态（使用sessionStorage，关闭浏览器后失效）
                    sessionStorage.setItem('authenticated', 'true');
                    window.location.reload();
                } else {
                    // 密码错误
                    errorElement.style.display = 'block';
                    passwordInput.value = '';
                    passwordInput.focus();
                    
                    // 3秒后隐藏错误信息
                    setTimeout(() => {
                        errorElement.style.display = 'none';
                    }, 3000);
                }
            }
            
            // 退出登录
            function logout() {
                sessionStorage.removeItem('authenticated');
                document.getElementById('auth-protection').style.display = 'flex';
                document.getElementById('main-content').style.display = 'none';
                document.getElementById('admin-password').value = '';
            }
            
            // 打开修改密码模态框
            function openChangePasswordModal() {
                document.getElementById('change-password-modal').style.display = 'block';
            }
            
            // 修改密码
            function changePassword() {
                const currentPassword = document.getElementById('current-password').value;
                const newPassword = document.getElementById('new-password').value;
                const confirmPassword = document.getElementById('confirm-password').value;
                
                if (currentPassword !== ADMIN_PASSWORD) {
                    showNotification('当前密码错误', 'error');
                    return false;
                }
                
                if (newPassword !== confirmPassword) {
                    showNotification('新密码和确认密码不匹配', 'error');
                    return false;
                }
                
                if (newPassword.length < 4) {
                    showNotification('密码长度至少需要4个字符', 'error');
                    return false;
                }
                
                // 更新密码
                ADMIN_PASSWORD = newPassword;
                localStorage.setItem('adminPassword', newPassword);
                
                showNotification('密码修改成功', 'success');
                closeModal('change-password-modal');
                document.getElementById('change-password-form').reset();
                
                return false;
            }
            
            // 页面加载时检查认证状态
            document.addEventListener('DOMContentLoaded', function() {
                const isAuthenticated = sessionStorage.getItem('authenticated');
                
                if (isAuthenticated === 'true') {
                    document.getElementById('auth-protection').style.display = 'none';
                    document.getElementById('main-content').style.display = 'block';
                    loadGames();
                    loadTeachers();
                } else {
                    document.getElementById('auth-protection').style.display = 'flex';
                    document.getElementById('main-content').style.display = 'none';
                }
                
                // 设置游戏表单提交事件
                document.getElementById('game-form').addEventListener('submit', function(e) {
                    e.preventDefault();
                    saveGame();
                });
                
                // 设置导师表单提交事件
                document.getElementById('firsttime-form').addEventListener('submit', function(e) {
                    e.preventDefault();
                    saveTeacher();
                });
                
                // 设置修改密码表单提交事件
                document.getElementById('change-password-form').addEventListener('submit', function(e) {
                    e.preventDefault();
                    changePassword();
                });
                
                // 设置搜索功能
                document.getElementById('game-search').addEventListener('input', function(e) {
                    filterTable('games-table', e.target.value);
                });
                
                document.getElementById('firsttime-search').addEventListener('input', function(e) {
                    filterTable('firsttime-table', e.target.value);
                });
                
                // 设置确认删除按钮事件
                document.getElementById('confirm-delete-btn').addEventListener('click', function() {
                    if (deleteType === 'game') {
                        deleteGame(deleteId);
                    } else if (deleteType === 'teacher') {
                        deleteTeacher(deleteId);
                    }
                    closeModal('confirm-dialog');
                });
                
                // 支持按Enter键提交密码
                document.getElementById('admin-password').addEventListener('keypress', function(e) {
                    if (e.key === 'Enter') {
                        checkPassword();
                    }
                });
            });
            
            // 加载游戏数据
            function loadGames() {
                // 检查是否已认证
                if (sessionStorage.getItem('authenticated') !== 'true') return;
                
                fetch(`${baseUrl}/admin/game/list`)
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('网络响应不正常');
                        }
                        return response.json();
                    })
                    .then(data => {
                        const tableBody = document.querySelector('#games-table tbody');
                        tableBody.innerHTML = '';
                        
                        if (data && data.length > 0) {
                            console.log(data)
                            data.forEach(game => {
                                const row = document.createElement('tr');
                                row.innerHTML = `
                                    <td data-label="ID">${game.ID || ''}</td>
                                    <td data-label="名称">${game.name || ''}</td>
                                    <td data-label="简述">
                                        <div class="content-container">${game.desc || ''}</div>
                                    </td>
                                    <td data-label="针对问题">
                                        <div class="content-container">${game.problem_to_solve || ''}</div>
                                    </td>
                                    <td data-label="玩法介绍">
                                        <div class="content-container">${game.introduction || ''}</div>
                                    </td>
                                    <td data-label="心理学解释">
                                        <div class="content-container">${game.theory_explanation || ''}</div>
                                    </td>
                                    <td class="actions" data-label="操作">
                                        <button class="action-btn edit-btn" onclick="editGame(${JSON.stringify(game).replace(/"/g, '&quot;')})">
                                            <i class="fas fa-edit"></i> 编辑
                                        </button>
                                        <button class="action-btn delete-btn" onclick="confirmDelete('game', '${game.ID}')">
                                            <i class="fas fa-trash"></i> 删除
                                        </button>
                                    </td>
                                `;
                                tableBody.appendChild(row);
                            });
                        } else {
                            const row = document.createElement('tr');
                            row.innerHTML = `<td colspan="7" class="no-data">没有找到游戏数据</td>`;
                            tableBody.appendChild(row);
                        }
                    })
                    .catch(error => {
                        console.error('加载游戏数据失败:', error);
                        showNotification('加载游戏数据失败: ' + error.message, 'error');
                        const tableBody = document.querySelector('#games-table tbody');
                        tableBody.innerHTML = `<td colspan="7" class="no-data">加载失败: ${error.message}</td>`;
                    });
            }
            
            // 加载导师数据
            function loadTeachers() {
                // 检查是否已认证
                if (sessionStorage.getItem('authenticated') !== 'true') return;
                
                fetch(`${baseUrl}/admin/teacher/list`)
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('网络响应不正常');
                        }
                        return response.json();
                    })
                    .then(data => {
                        const tableBody = document.querySelector('#firsttime-table tbody');
                        tableBody.innerHTML = '';
                        
                        if (data && data.length > 0) {
                            data.forEach(teacher => {
                                const row = document.createElement('tr');
                                row.innerHTML = `
                                    <td data-label="导师ID">${teacher.teacher_id || ''}</td>
                                    <td data-label="名称">${teacher.name || ''}</td>
                                    <td data-label="描述">
                                        <div class="content-container">${teacher.desc || ''}</div>
                                    </td>
                                    <td data-label="海报url">${teacher.PostportUrl || ''}</td>
                                    <td class="actions" data-label="操作">
                                    
                                        <button class="action-btn edit-btn" onclick="editTeacher(${JSON.stringify(teacher).replace(/"/g, '&quot;')})">
                                            <i class="fas fa-edit"></i> 编辑
                                        </button>
                                        <button class="action-btn delete-btn" onclick="confirmDelete('teacher', '${teacher.teacher_id}')">
                                            <i class="fas fa-trash"></i> 删除
                                        </button>
                                    </td>
                                `;
                                tableBody.appendChild(row);
                            });
                        } else {
                            const row = document.createElement('tr');
                        
                            row.innerHTML = `<td colspan="5" class="no-data">没有找到导师数据</td>`;
                            tableBody.appendChild(row);
                        }
                    })
                    .catch(error => {
                        console.error('加载导师数据失败:', error);
                        showNotification('加载导师数据失败: ' + error.message, 'error');
                        const tableBody = document.querySelector('#firsttime-table tbody');
                        tableBody.innerHTML = `<td colspan="5" class="no-data">加载失败: ${error.message}</td>`;
                    });
            }
            
            // 保存游戏数据
            function saveGame() {
                const gameId = document.getElementById('game-id').value;
                const isUpdate = gameId !== '';
                
                const gameData = {
                    id:gameId,
                    name: document.getElementById('game-name').value,
                    desc: document.getElementById('game-desc').value,
                    problem_to_solve: document.getElementById('game-problemtosolve').value,
                    introduction: document.getElementById('game-introduction').value,
                    theory_explanation: document.getElementById('game-theoryexplanation').value
                };
                
                if (isUpdate) {
                    gameData.id = gameId;
                }
                
                const url = isUpdate ? `${baseUrl}/admin/game/update` : `${baseUrl}/admin/game/create`;
                const method = 'POST';
                console.log( JSON.stringify(gameData))
                fetch(url, {
                    method: method,
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(gameData)
                })
                .then(response => {
                
                    if (!response.ok) {
                        throw new Error('网络响应不正常');
                    }
                    return response.json();
                })
                .then(data => {
                    showNotification(isUpdate ? '游戏更新成功' : '游戏创建成功');
                    closeModal('game-modal');
                    loadGames();
                })
                .catch(error => {
                    console.error('保存游戏数据失败:', error);
                    showNotification('保存游戏数据失败: ' + error.message, 'error');
                });
            }
            
            // 保存导师数据
            function saveTeacher() {
                const teacherId = document.getElementById('firsttime-id').value;
                const isUpdate = teacherId !== '';
                
                const teacherData = {
                    name: document.getElementById('firsttime-name').value,
                    desc: document.getElementById('firsttime-desc').value,
                    Postport_url: document.getElementById('firsttime-postporturl').value
                };
                
                if (isUpdate) {
                    teacherData.teacher_id = teacherId;
                }
                
            
                const url = isUpdate ? `${baseUrl}/admin/teacher/update` : `${baseUrl}/admin/teacher/create`;
                const method = 'POST';
                
                fetch(url, {
                    method: method,
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(teacherData)
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('网络响应不正常');
                    }
                    return response.json();
                })
                .then(data => {
                    showNotification(isUpdate ? '导师更新成功' : '导师创建成功');
                    closeModal('firsttime-modal');
                    loadTeachers();
                })
                .catch(error => {
                    console.error('保存导师数据失败:', error);
                    showNotification('保存导师数据失败: ' + error.message, 'error');
                });
            }
            
            // 编辑游戏
            function editGame(game) {
                document.getElementById('game-modal-title').textContent = '编辑游戏';
                document.getElementById('game-id').value = game.ID || '';
                document.getElementById('game-name').value = game.name || '';
                document.getElementById('game-desc').value = game.desc || '';
                document.getElementById('game-problemtosolve').value = game.problem_to_solve || '';
                document.getElementById('game-introduction').value = game.introduction || '';
                document.getElementById('game-theoryexplanation').value = game.theory_explanation || '';
                
                document.getElementById('game-modal').style.display = 'block';
            }
            
            // 编辑导师
            function editTeacher(teacher) {
                document.getElementById('firsttime-modal-title').textContent = '编辑导师';
                document.getElementById('firsttime-id').value = teacher.teacher_id || '';
                document.getElementById('firsttime-name').value = teacher.name || '';
                document.getElementById('firsttime-desc').value = teacher.desc || '';
                document.getElementById('firsttime-postporturl').value = teacher.PostportUrl || '';
                
                document.getElementById('firsttime-modal').style.display = 'block';
            }
            
            // 确认删除
            function confirmDelete(type, id) {
                deleteType = type;
                deleteId = id;
                document.getElementById('confirm-dialog').style.display = 'block';
            }
            
            // 删除游戏
            function deleteGame(id) {
            
                fetch(`${baseUrl}/admin/game/delete`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                
                    body: JSON.stringify({
                        id : id,
                        name: "",
                        desc:"",
                        problem_to_solve:"",
                        introduction:"",
                        theory_explanation:""
                    })
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('网络响应不正常');
                    }
                    return response.json();
                })
                .then(data => {
                    showNotification('游戏删除成功');
                    loadGames();
                })
                .catch(error => {
                    console.error('删除游戏失败:', error);
                    showNotification('删除游戏失败: ' + error.message, 'error');
                });
            }
            
            // 删除导师
            function deleteTeacher(id) {
            
                fetch(`${baseUrl}/admin/teacher/delete`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                    teacher_id:id,
                    name: "",
                    desc: "",
                    Postport_url: "",
                })
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('网络响应不正常');
                    }
                    return response.json();
                })
                .then(data => {
                    showNotification('导师删除成功');
                    loadTeachers();
                })
                .catch(error => {
                    console.error('删除导师失败:', error);
                    showNotification('删除导师失败: ' + error.message, 'error');
                });
            }
            
            // 打开标签页
            function openTab(evt, tabName) {
                const tabContents = document.getElementsByClassName('tab-content');
                for (let i = 0; i < tabContents.length; i++) {
                    tabContents[i].classList.remove('active');
                }
                
                const tabs = document.getElementsByClassName('tab');
                for (let i = 0; i < tabs.length; i++) {
                    tabs[i].classList.remove('active');
                }
                
                document.getElementById(tabName).classList.add('active');
                evt.currentTarget.classList.add('active');
                
                currentTab = tabName;
            }
            
            // 打开游戏模态框
            function openGameModal() {
                document.getElementById('game-modal-title').textContent = '添加新游戏';
                document.getElementById('game-form').reset();
                document.getElementById('game-id').value = '';
                document.getElementById('game-modal').style.display = 'block';
            }
            
            // 打开导师模态框
            function openFirstTimeModal() {
            
                document.getElementById('firsttime-modal-title').textContent = '添加新导师';
                document.getElementById('firsttime-form').reset();
                document.getElementById('firsttime-id').value = '';
                document.getElementById('firsttime-modal').style.display = 'block';
            }
            
            // 关闭模态框
            function closeModal(modalId) {
                document.getElementById(modalId).style.display = 'none';
            }
            
            // 过滤表格
            function filterTable(tableId, searchText) {
                const table = document.getElementById(tableId);
                const rows = table.getElementsByTagName('tr');
                
        
                for (let i = 1; i < rows.length; i++) {
                    let row = rows[i];
                    let cells = row.getElementsByTagName('td');
                    let found = false;
                    
                    for (let j = 0; j < cells.length - 1; j++) {
                        if (cells[j].textContent.toLowerCase().includes(searchText.toLowerCase())) {
                            found = true;
                            break;
                        }
                    }
                    
                    row.style.display = found ? '' : 'none';
                }
            }
            
            // 显示通知
            function showNotification(message, type = 'success') {
                const notification = document.getElementById('notification');
                notification.textContent = message;
                notification.className = 'notification';
                
                if (type === 'error') {
                    notification.classList.add('error');
                } else if (type === 'warning') {
                    notification.classList.add('warning');
                } else {
                    notification.classList.add('success');
                }
                
                notification.classList.add('show');
                
                setTimeout(() => {
                    notification.classList.remove('show');
                }, 3000);
            }
            
            // 点击模态框外部关闭
            window.onclick = function(event) {
                const gameModal = document.getElementById("game-modal");
                const firstTimeModal = document.getElementById("firsttime-modal");
                const confirmDialog = document.getElementById("confirm-dialog");
                const changePasswordModal = document.getElementById("change-password-modal");
                
                if (event.target == gameModal) {
                    gameModal.style.display = "none";
                }
                
                if (event.target == firstTimeModal) {
                    firstTimeModal.style.display = "none";
                }
                
                if (event.target == confirmDialog) {
                    confirmDialog.style.display = "none";
                }
                
                if (event.target == changePasswordModal) {
                    changePasswordModal.style.display = "none";
                }
            }
        </script>
    </body>
    </html>